<template>
  <view class="light-box-shadow item-box" :class="customClass" :style="{width:width,height:height}">
    <view class="item-title">
      <template v-if="title">
        {{title}}
      </template>
      <slot name="header"></slot>
    </view>
    <view class="content">
      <slot name="content"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "feedback",
  props: {
    custClass: {
      type: String | Array,
      default() {
        return []
      },
    },

    width: {
      type: String | Number,
      default: '100%'
    },

    height: {
      type: String | Number,
      default: 'auto'
    },

    title: {
      type: String,
      default: ''
    },
  }
}
</script>

<style lang="scss" scoped>
.item-box{
  background: #FFFFFF;
  border-radius: 20rpx;
  margin: 0 auto;
  margin-bottom: 30rpx;
  overflow: hidden;
  .item-title{
    background: #292E4E;
    height: 64rpx;
    line-height: 64rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: bold;
  }
  .content{
    padding: 20rpx;
    box-sizing: border-box;
    word-break: break-all;
  }
}
</style>